<div class="col-md-12">
	<div class="col-md-12 search-box m-b-md m-t">
		<div class="legend">查询条件</div>
		<div class="search-content">
			<div class="form-group">
				<label class="control-label">平台实例：</label>
				<select class="form-control" ng-model="allData.vendorId">
					<option value="">--请选择--</option>
					<option ng-repeat="item in allData.platformData" ng-selected="allData.vendorId==item.id"  value="{{item.id}}" ng-bind="item.name"></option>
				</select>
			</div>
		</div>
		<div class="search-btn">
			<button class="btn btn-primary w-xs m-r" ng-click="search(allData)"><i class="fa fa-search"></i> 查询</button>
			<button class="btn btn-success w-xs m-r" ng-click="export(allData)"><i class="fa fa-download"></i> 导出报表</button>
		</div>
	</div>
</div>
<div ng-class="{true:'col-md-12',false:'col-md-6'}[allData.overviewData.openstack==null]" ng-if="allData.overviewData.vmware">
	<div class="panel panel-default m-b">
		<div class="panel-heading">概览 VCenter</div>
		<div class="panel-detail report-overview" style="padding: 0 16px">
			<div class="row">
				<div class="col-md-6">
					<label class="control-label">数据中心数量：</label>
					<span>{{allData.overviewData.vmware.centers}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">集群数量：</label>
					<span>{{allData.overviewData.vmware.clusters}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">宿主机数量：</label>
					<span>{{allData.overviewData.vmware.hosts}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">虚拟机数量：</label>
					<span>{{allData.overviewData.vmware.servers}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">模板数量：</label>
					<span>{{allData.overviewData.vmware.templates}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">快照数量：</label>
					<span>{{allData.overviewData.vmware.snapshots}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">网络数量：</label>
					<span>{{allData.overviewData.vmware.networks}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">存储数量：</label>
					<span ng-bind="allData.overviewData.vmware.stores"></span>
				</div>
				<div class="col-md-6">
					<label class="control-label">cpu数量：</label>
					<span>{{allData.overviewData.vmware.cpus}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">内存大小：</label>
					<span>{{allData.overviewData.vmware.mems}}MB</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">磁盘大小：</label>
					<span>{{allData.overviewData.vmware.disks}}GB</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">告警数量：</label>
					<span>{{allData.overviewData.vmware.alarms}}个</span>
				</div>
			</div>
		</div>
	</div>
</div>
<div ng-class="{true:'col-md-12',false:'col-md-6'}[allData.overviewData.vmware==null]" ng-if="allData.overviewData.openstack">
	<div class="panel panel-default m-b">
		<div class="panel-heading">概览 OPENSTACK</div>
		<div class="panel-detail report-overview" style="padding: 0 16px">
			<div class="row">
				<div class="col-md-6">
					<label class="control-label">宿主机数量：</label>
					<span>{{allData.overviewData.openstack.hosts}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">虚拟机数量：</label>
					<span>{{allData.overviewData.openstack.servers}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">模板数量：</label>
					<span>{{allData.overviewData.openstack.templates}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">快照数量：</label>
					<span>{{allData.overviewData.openstack.snapshots}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">镜像数量：</label>
					<span>{{allData.overviewData.openstack.images}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">网络数量：</label>
					<span>{{allData.overviewData.openstack.networks}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">存储数量：</label>
					<span>{{allData.overviewData.openstack.volumes}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">cpu数量：</label>
					<span>{{allData.overviewData.openstack.cpus}}个</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">内存大小：</label>
					<span>{{allData.overviewData.openstack.mems}}MB</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">磁盘大小：</label>
					<span>{{allData.overviewData.openstack.disks}}GB</span>
				</div>
				<div class="col-md-6">
					<label class="control-label">告警数量：</label>
					<span>{{allData.overviewData.openstack.alarms}}个</span>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="col-md-12">
	<div class="panel panel-default m-b">
		<div class="panel-heading">主机资源</div>
		<div class="panel-detail">
			<div class="col-sm-12 data-report" >
				<table class="table b-light m-b-xxs m-t">
					<thead class="table-header" >
					<tr>
						<th></th>
						<th class="font-15 text-center">名称</th>
						<th class="font-15 text-center">IP</th>
						<th class="font-15 text-center">集群</th>
						<th class="font-15 text-center">电源状态</th>
						<th class="font-15 text-center">虚机总数</th>
						<th class="font-15 text-center">模板总数</th>
						<th class="font-15 text-center">所属平台</th>
					</tr>
					</thead>
					<tbody  ng-repeat="row in allData.hostList">
					<tr>
						<td width="3%" class="text-center report-overview-action">
							<i ng-show="row.isShow" class="fa fa-minus" ng-click="loadVmData(row)"></i>
							<i ng-hide="row.isShow" class="fa fa-plus" ng-click="loadVmData(row)"></i>
						</td>
						<td width="12%" class="text-center " style="max-width:88px;" title="{{row.name}}" ng-click="goDetail($event,row.id)">
							<span ng-bind="row.name"></span>
						</td>
						<td width="8%" class="text-center text-overflow" style="max-width:96px;"
						    title="{{row.hostIp}}" ng-bind="row.hostIp"></td>
						<td width="8%" class="text-center text-overflow" style="max-width:80px;"
						    title="{{row.clusterName}}" ng-bind="row.clusterName"></td>
						<td width="8%" lass="font-15 text-center" style="padding-left:15px;">
							<div class="text-left" style="padding-left:10%;">
								<i class="status-dot-style" ng-class="{'RUNNING':'dot-8','STOPPED':'dot-1','UNKNOWN':'dot-9'}[row.powerState]"></i>
								<span class="status-span-style" title="{{row.powerState|cn:'vmStatus'}}" ng-bind="row.powerState|cn:'vmStatus'"></span>
							</div>
						</td>
						<td width="8%" class="text-center text-overflow" style="max-width:58px;"
						    title="{{row.vmNum}}" ng-bind="row.vmNum"></td>
						<td width="8%" class="text-center text-overflow" style="max-width:58px;"
						    title="{{row.templateNum}}" ng-bind="row.templateNum"></td>
						<td width="8%" class="text-center text-overflow" style="max-width:58px;"
						    title="{{row.vendorName}}" ng-bind="row.vendorName"></td>
					</tr>
					<tr ng-show="row.isShow" >
						<td class="text-center" colspan="8">
							<table class="table b-light m-b-xxs" st-table="displayListData" st-safe-src="row.vmList">
								<thead class="table-header" >
								<tr>
									<th class="font-15 text-center">虚机名称</th>
									<th class="font-15 text-center">宿主机</th>
									<th class="font-15 text-center">IP地址</th>
									<th class="font-15 text-center">状态</th>
									<th class="font-15 text-center">数据存储区</th>
									<th class="font-15 text-center">快照数量</th>
									<th class="font-15 text-center">磁盘/GB</th>
								</tr>
								</thead>
								<tbody>
								<tr class="table-content" ng-repeat="rows in displayListData">
									<td class="font-15 text-center text-overflow" style="max-width:210px;"
									    title="{{rows.name}}" ng-bind="rows.name" ></td>
									<td class="font-15 text-center text-overflow" style="max-width:210px;"
									    title="{{rows.hostName}}" ng-bind="rows.hostName"></td>
									<td class="font-15 text-center text-overflow" style="max-width:210px;"
									    title="{{rows.managerIp}}" ng-bind="rows.managerIp"></td>
									<td class="font-15 text-center" style="padding-left:15px;">
										<div class="text-left" style="padding-left:10%;">
											<i class="status-dot-style" ng-class="{'success':'dot-8','danger':'dot-1','warning':'dot-9','primary':'dot-7','default':'dot-4','info':'dot-6'}[rows.statusColor]"></i>
											<span class="status-span-style" title="{{rows.status|cn:'vmStatus'}}" ng-bind="rows.status|cn:'vmStatus'"></span>
										</div>
									</td>
									<td class="font-15 text-center text-overflow" style="max-width:209px;"
									    title="{{rows.datastores}}" ng-bind="rows.datastores"></td>
									<td class="font-15 text-center text-overflow" style="max-width:161px;" title="{{rows.snapshotCount}}" ng-bind="rows.snapshotCount"></td>
									<td class="font-15 text-center text-overflow" style="max-width:156px;"
									    title="{{rows.disk}}" ng-bind="rows.disk"></td>
								</tr>
								</tbody>
								<tfoot>
								<tr>
									<td colspan="3" class="text-left">
										<div>每页{{itemsByPage}}条，共{{row.vmList.length}}条</div>
									</td>
									<td colspan="4" class="text-right">
										<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7" class="no-margin"></div>
									</td>
								</tr>
								</tfoot>
							</table>
						</td>
					</tr>
					</tr>
					</tbody>
					<tr ng-if="isImageData">
						<td class="td-nodata" colspan="7"></td>
					</tr>
				</table>
				<div class="clearfix">
					<div class="col-sm-6" style="padding: 7px 15px;">
						<div class="paginationTables_info">总共<span ng-bind="totalCount"></span>条, 每页<span
								ng-bind="param.rows"></span>条
						</div>
					</div>
					<div class="col-sm-6 text-right">
						<pagination style="" boundary-links="true" total-items="totalCount" items-per-page="param.rows"
						            max-size="10" ng-model="param.page" ng-change="getHostList(param.page)"
						            previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;"
						            last-text="&raquo;"></pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="col-md-12">
	<div class="panel panel-default m-b">
		<div class="panel-heading">告警</div>
		<div class="panel-detail">
			<div class="col-sm-12 m-t">
				<table class="table b-light m-b-xxs">
					<thead class="table-header">
					<tr>
						<th width="15%" class="font-15 text-center">告警名称</th>
						<th width="10%" class="font-15 text-center">告警类型</th>
						<th width="10%" class="font-15 text-center">告警目标</th>
						<th width="10%" class="font-15 text-center">告警状态</th>
						<th width="10%" class="font-15 text-center">触发时间</th>
						<th width="10%" class="font-15 text-center">确认时间</th>
						<th width="10%" class="font-15 text-center">确认人</th>
						<th width="20%" class="font-15 text-center">所属平台</th>
					</tr>
					</thead>
					<tbody>
					<tr class="table-content" ng-repeat="row in allData.alarmList">
						<td width="15%" class="font-15 text-center text-overflow" style="max-width:170px;" title="{{row.name}}"  ng-bind="row.name" ng-click="detail(row.id)"></td>
						<td width="10%" class="font-15 text-center text-overflow" style="max-width:113px;" title="{{row.type}}" ng-bind="row.type"></td>
						<td width="10%" class="font-15 text-center text-overflow" style="max-width:113px;" title="{{row.target}}" ng-bind="row.target"></td>
						<td width="10%" class="font-15 text-center text-overflow" style="max-width:113px;" >
							<div class="text-left" style="padding-left:25%;">
								<i class="status-dot-style" ng-class="{'CONFIRMED':'btn-success','UNCONFIRM':'btn-warning'}[row.status]"></i><span class="status-span-style" title="{{row.status|cn:'alarmStatus'}}" ng-bind="row.status|cn:'alarmStatus'"></span>
							</div>
						</td>
						<td width="10%" class="font-15 text-center text-overflow" style="max-width:113px;" title="{{row.gmtTrigger}}" ng-bind="row.gmtTrigger"></td>
						<td width="10%" class="font-15 text-center text-overflow" style="max-width:113px;" title="{{row.gmtConfirm}}" ng-bind="row.gmtConfirm"></td>
						<td width="10%" class="font-15 text-center text-overflow" style="max-width:113px;" title="{{row.confirmer}}" ng-bind="row.confirmer"></td>
						<td width="20%" class="font-15 text-center text-overflow" style="max-width:227px;" title="{{row.vendorName}}" ng-bind="row.vendorName"></td>
					</tr>
					<tr ng-if="isAlarmData">
						<td class="td-nodata" colspan="8"></td>
					</tr>
					</tbody>
				</table>
				<div class="clearfix">
					<div class="col-sm-6" style="padding: 7px 15px;">
						<div class="paginationTables_info">总共<span ng-bind="alarmTotalCount"></span>条, 每页<span ng-bind="alarmParam.rows"></span>条</div>
					</div>
					<div class="col-sm-6 text-right">
						<pagination style="" boundary-links="true" total-items="alarmTotalCount" items-per-page="alarmParam.rows" max-size="10" ng-model="alarmParam.page" ng-change="loadAlarmData(alarmParam.page)" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>